<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            padding: 0;
            margin: 0;
        }
        form{
            max-width: 500px;
            height: 250px;
            background: linear-gradient(135deg,#03a9f4,#61e8c3);
            border-radius: 2px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        div{
            font-size: 20px;
            display: flex;
            align-items: center;
            margin-top: 10px;
            color: white;
        }
        input{
            max-width: 350px;
            height: 30px;
            font-size: 20px;
            background-color: azure;
            outline: none;
            border: 2px solid #fff;
            color: deepskyblue;
            text-indent: .1em;
            border-radius: 2px;
        }
        span{
            display: inline-block;
            width: 24px;
            line-height: 24px;
            text-align: center;
            color: white;
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
            border-radius: 50%;
            cursor: pointer;
        }
        button{
            width: 100px;
            height: 30px;
            background-color: azure;
            outline: none;
            border: 2px solid #fff;
            color: deepskyblue;
            border-radius: 2px;
            font-weight: bold;
            margin-top: -15px;
        }
        button:hover{
            color: gray;
        }
        
    </style>
</head>
<body>
    <form action="#">
        <div>账号：<input type="text" id="account" name="acc"><span></span></div>
        <div>密码：<input type="text" id="pass" name="psw"><span></span></div>
        <div>邮箱：<input type="text" id="email" name="email"><span></span></div>
        <button>注册</button>
    </form>
</body>
    <script>
        var account = document.getElementById('account')
        var pass = document.getElementById('pass')
        var email = document.getElementById('email')
        var form = document.getElementsByTagName('form')[0]
        var accountCheck = false;
        account.onblur = function(){
            var str = this.value;
            var nextSpan = this.nextElementSibling   //input之后的那个span
            accountCheck = false      //重置
            if(str.length<6||str.length>16){   //限定长度
                accountCheck = false   
            }else{
                //注意，这里匹配的汉字，长度算1
                var reg = /[^\u4E00-\u9FA5A-Za-z0-9]/
                if(str.match(reg)==null){      //没有检测出非法字符
                    accountCheck =true
                }
            }
            if(!accountCheck){    //验证失败，调整输入框样式
                    this.style.borderColor = 'orange'
                    nextSpan.innerHTML = '!'
                    nextSpan.style.backgroundColor = 'orange'
                    nextSpan.setAttribute('title','（6-16位）支持中文、字母、数字')
            }else{
                this.style.borderColor = 'yellowgreen'
                nextSpan.innerHTML = '√'
                nextSpan.style.backgroundColor = 'yellowgreen'
                nextSpan.removeAttribute('title')
            }
        }
        var passCheck = false;
        pass.onblur = function(){
            var str = this.value;
            var nextSpan = this.nextElementSibling   //input之后的那个span
            passCheck = false;  //重置
            if(str.length<6||str.length>16){
                passCheck = false;
            }else{
                var reg = /[^A-Za-z0-9_]/    
                if(str.match(reg)!=null){    //检测是不是 非字母数字下划线
                    passCheck = false
                }else{   //字符类型满足条件，判断类型数量
                    let kind = 0;
                    if(str.match(/[A-Za-z]/)){
                        kind++
                    }
                    if(str.match(/[0-9]/)){
                        kind++
                    }
                    if(str.match(/_/)){
                        kind++
                    }
                    if(kind>=2){   //有两种以及以上的字符符合要求
                        passCheck = true
                    }
                }
            }
            if(!passCheck){
                this.style.borderColor = 'orange'
                nextSpan.innerHTML = '!'
                nextSpan.style.backgroundColor = 'orange'
                nextSpan.setAttribute('title','（6-16位）支持字母、数字、下划线，且必须包含其中至少两种')
            }else{
                this.style.borderColor = 'yellowgreen'
                nextSpan.innerHTML = '√'
                nextSpan.style.backgroundColor = 'yellowgreen'
                nextSpan.removeAttribute('title')
            }
        }
        var emailCheck = false;
        email.onblur = function(){
            var str = this.value;
            var nextSpan = this.nextElementSibling   //input之后的那个span
            emailCheck = false
            if(str.length>17||str.length<11){
                emailCheck = false;
            }else{
                //匹配腾讯QQ邮箱
                var reg = /^[1-9][0-9]{4,10}@qq\.com$/
                if(reg.test(str)){
                    emailCheck = true;
                }
            }
            if(!emailCheck){
                this.style.borderColor = 'orange'
                nextSpan.innerHTML = '!'
                nextSpan.style.backgroundColor = 'orange'
                nextSpan.setAttribute('title','仅支持QQ邮箱：xxxxx@qq.com')
            }else{
                this.style.borderColor = 'yellowgreen'
                nextSpan.innerHTML = '√'
                nextSpan.style.backgroundColor = 'yellowgreen'
                nextSpan.removeAttribute('title')
            }
        }
        // console.log(emailCheck,passCheck,accountCheck)
        form.onsubmit = function(){
            if(emailCheck&&passCheck&&accountCheck){  //三个都验证成功才可以提交
                return true
            }else{
                return false
            }
        }   
    </script>
</html>